<template>
	<view class="container">
		<view class="tui-cells">
			<textarea class="tui-textarea" focus="true" v-model="comment" name="comment" placeholder="发表你的评论..." maxlength="500" placeholder-class="tui-phcolor-color" />
			<view class="tui-textarea-counter">0/500</view>
		</view>
		<!-- <view class="tui-enclosure">
			<tui-icon name="satisfied" class="tui-mr"></tui-icon>
			<tui-icon name="picture" class="tui-mr"></tui-icon>
			<tui-icon name="link" class="tui-mr"></tui-icon>
		</view> -->
		<view class="tui-cmt-btn" @tap="articleComment ">
			<button class="tui-btn">发表</button>
		</view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/icon/icon"
	export default {
		components: {
			tuiIcon
		},
		data() {
			return {
				comment : '',
				articleId : ''
			}
		},
		 onLoad(option) {
			this.articleId = option.id;
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
		},
		methods: {
			articleComment(){
				this.$apiW.articleComment({
					articleId : this.articleId,
					userId : this.$xinli.user.getUserId(),
					comment : this.comment
				});
			}
		}
	}
</script>

<style scoped>
page {
  background: #fff;
  color: #333;
}
.tui-btn{
		background-color: #df5451;
		color: #fff;
	}
.container{
  padding: 30upx;
  box-sizing: border-box;
}

.tui-cells {
  border-radius: 4upx;
  height: 280upx;
  box-sizing: border-box;
  padding: 20upx 20upx 0 20upx;
  position: relative;
}

.tui-cells::after {
  content: '';
  position: absolute;
  height: 200%;
  width: 200%;
  border: 1px solid #e6e6e6;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  left: 0;
  top: 0;
  border-radius: 8upx;
}

.tui-textarea {
  height: 210upx;
  width: 100%;
  color: #666;
  font-size: 28upx;
}

.tui-phcolor-color {
  color: #ccc !important;
}

.tui-textarea-counter {
  font-size: 24upx;
  color: #999;
  text-align: right;
  height: 40upx;
  line-height: 40upx;
  padding-top: 4upx;
}
.tui-enclosure{
 display: flex;
 align-items: center;
 padding: 26upx 10upx;
 box-sizing: border-box;
}
.tui-mr{
  margin-right: 60upx;
}
.tui-cmt-btn{
  margin-top: 60upx;
}
</style>
